<template>
  <div class="col-sm-12">
    <!-- <form class="form-horizontal"> -->
    <div class="form-horizontal">
      <div class="site-bgcolor">
        <hr/>

        <div class="form-group">
          <label for="ids" class="col-sm-1 control-label">唯一标识</label>

          <div class="col-sm-4">
            <input class="form-control" id="ids" v-model="item.id" disabled>
          </div>
        </div>

        <div class="form-group">
          <label for="principal" class="col-sm-1 control-label">负责人</label>

          <div class="col-sm-4">
            <input class="form-control" id="principal" v-model="item.principal">
          </div>
        </div>

        <div class="form-group">
          <label for="description" class="col-sm-1 control-label">描述</label>

          <div class="col-sm-4">
            <textarea class="form-control" id="description" v-model="item.description"></textarea>
          </div>
        </div>

        <div class="form-group">
          <label for="deadline" class="col-sm-1 control-label">截止期</label>

          <div class="col-sm-4">
            <input type="date" class="form-control" id="deadline" v-model="item.deadline">
          </div>
        </div>

        <div class="form-group">
          <label for="state" class="col-sm-1 control-label">状态</label>

          <div class="col-sm-4">
            <select id="state" v-model="item.state">
              <option value="0">未完成</option>
              <option value="1">执行中</option>
              <option value="8">已完成</option>
            </select>
          </div>
        </div>

        <div class="form-group">
          <div class="col-sm-3 col-md-push-9">
            <button class="btn btn-default" v-on:click="onCancelClick()">取消</button>
            <button class="btn btn-default" v-on:click="onSubmitClick(item)">提交</button>
          </div>
        </div>
        <br>
      </div>
    </div>
    <!-- </form> -->
  </div>
</template>
<style>
  .site-bgcolor {
    background: AliceBlue
  }
</style>
<script>
  // import { find } from './actions'
  export default {
    name: 'Edit',
    data: function () {
      return {
        url: 'http://euvee.vicp.co/rest/task/'
      }
    },
    props: ['item', 'mode'],
    components: {},
    methods: {
      onCancelClick: function () {
        this.$dispatch('finditem')
        this.$dispatch('component', 'modeList')
      },
      onSubmitClick: function (item) {
        if (this.mode === 'modeAddNew') {
          this.$http.post(this.url, item).then(function (response) {
            window.alert('提交成功 ')
            this.$dispatch('finditem')
            this.item = {}
            this.$dispatch('component', 'modeList')
          }, function (response) {
            window.alert('failed to save,Probably failed to connect the backend server! Pls check your server status! ')
          })
        } else {
          this.$http.put(this.url + item.id, item).then(function (response) {
            window.alert('修改成功 ')
            this.$dispatch('component', 'modeList')
          }, function (response) {
            this.$dispatch('finditem')
            window.alert('failed to update,Probably failed to connect the backend server! Pls check your server status! ')
          })
        }
      }
    },
    events: {
      'url': function (url) {
        this.url = url
        console.log(this.url)
      }
    }
    /*   vuex: {
     actions: {
     onSubmitClick: find
     }
     }*/
  }
</script>
